<template>
  <div>
    <transition name="van-slide-right" mode="out-in">
      <div v-show="!item.done" @click="show=true" @touchstart="handlerTouchstart" @touchmove="handlerTouchmove" @touchend="handlerTouchend">
        <van-swipe-cell left-width="300px" right-width="300px">
          <template #left>
             <van-button square type="info" text="编辑" @click="edit"/>
          </template>
          <div>
            <van-cell
              center
              :title="item.title"
              :value="item.deadLine"
              :label="item.info">
            </van-cell>
          </div>

          <template #right>
             <van-button square type="primary" text="完成" @click="done"/>
          </template>
        </van-swipe-cell>
      </div>
    </transition>
    <todo-info-dialog :show.sync="show" :item="item" />
  </div>
</template>

<script>
import TodoInfoDialog from './TodoInfoDialog.vue'
export default {
  components: {
    TodoInfoDialog
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      show: false,
      // 定时器
      loop: 0
    }
  },
  methods: {
    done () {
      this.$emit('done', this.item)
    },
    edit () {
      this.$router.push({ name: 'EditTodo', query: { item: this.item } })
    },
    handlerTouchstart () {
      this.loop = setTimeout(() => {
        this.loop = 0
        // 执行长按要执行的内容
        // this.$notify('没有长按事件')
        this.$dialog.confirm({
          title: '删除计划',
          message: '是否确定删除?'
        }).then(() => {
          var list = this.$store.state.app.todoList
          list = list.filter(x => x.id !== this.item.id)
          this.$store.dispatch('app/setTodoList', list).then(() => {
            this.$toast('已删除')
            this.$emit('refresh')
          })
        })
          .catch(() => {
          // on cancel
          })
      }, 500) // 定时的时间
      return false
    },
    handlerTouchmove () {
      // 清除定时器
      clearTimeout(this.loop)
      this.loop = 0
    },
    handlerTouchend () {
      // 清除定时器
      clearTimeout(this.loop)
      if (this.loop !== 0) {
        // 单击操作
        this.clickShow = true
        this.longClickShow = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell{
  transition: 200ms;
  background-color: white;
  height: 160px;
  span{
    font-size: 35px;
    line-height: 60px;
  }
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #b6b6b6;
  outline: medium;
}
::v-deep .van-cell__title{
  text-align: left;
  padding-left: 60px;
}
::v-deep .van-cell__value{
  padding-right: 30px;
}
::v-deep .van-cell__label{
  font-size: 28px;
  line-height: 30px;
}
.van-cell:active{
  background: #dadada;
  opacity: 0.5;
}
.van-button{
  height: 160px !important;
  width: 300px;
  font-size: 30px;
}
</style>
